<template>
  <view 
    class="coupon-page"
    :style="{backgroundImage:'url('+staticImgs.bg+')'}"
  >
    <navigationBar :my-property="navigationBarCompData" />
    <view class="content-wrapper">
      <view 
        class="tabs-wrapper"
        :style="{top:globalData.topHeight*2 + 'rpx'}"
      >
        <view class="tab-box" :class="{'tab-box-act':0 == currentTabIndex}" @click="tabClickHandle(0)">
          <view class="tab-box-text">
            待使用
            <view class="act-line"></view>
          </view>
          <view class="tab-extra-info" v-if="couponCount">{{couponCount}}张</view>
        </view>
        <view class="tab-box" :class="{'tab-box-act':1 == currentTabIndex}" @click="tabClickHandle(1)">
          <view class="tab-box-text">
            历史
            <view class="act-line"></view>
          </view>
        </view>
      </view>
      
      <!-- <mescroll-body :height="bodyHeight" ref="mescrollRef" @init="mescrollInit" @down="downCallback"
      				@up="getUserDiscountPage" :down="downOption" :up="upOption"> -->
        <view class="coupon-list-wrapper" v-if="!reload">
          <template v-if="!isEmptyCoupon">
            <!-- {{JSON.stringify(couponData)}}
            {{isEmptyCoupon}} -->
            <view class="group" v-if="couponData[0].length">
              <Tit tit="全场通用券" />
              <view class="coupon-list">
                <Box @clickHandle="()=>clickBoxHandle(coupon)" :coupon="coupon" v-for="(coupon,index) in couponData[0]" :key="index" />
              </view>
            </view>
            
            <view class="group" v-if="couponData[1].length">
              <Tit tit="测评类优惠" />
              <view class="coupon-list">
                <Box @clickHandle="()=>clickBoxHandle(coupon)" :coupon="coupon" v-for="(coupon,index) in couponData[1]" :key="index" />
              </view>
            </view>
            
            <view class="group" v-if="couponData[2].length">
              <Tit tit="咨询类优惠" />
              <view class="coupon-list">
                <Box @clickHandle="()=>clickBoxHandle(coupon)" :coupon="coupon" v-for="(coupon,index) in couponData[2]" :key="index" />
              </view>
            </view>

          </template>
        
          <template v-else>
            <view class="empty-block">
              <view class="empty-icon">
                <image :src="staticImgs.emptyIcon" mode=""></image>
              </view>
              <view class="text">暂无优惠券</view>
            </view>
          </template>
        </view>
        <!-- </mescroll-body> -->
      </view>
    
    
    <!-- 弹窗 -->
    <template></template>
    <!-- 弹窗 -->
  </view>
</template>

<script>
  import navigationBar from "@/components/navigationBar/navigationBar.vue";
  import Tit from './comp/Tit.vue'
  import Box from './comp/Box.vue'
  import{
    getUserDiscountCount,
    getUserDiscountPage
  } from '@/common/api/user_api.js'
  // import dayjs from 'dayjs'
  import { COUPON_TYPES } from '@/common/dict.js'
  import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
  
  export default{
    mixins:[MescrollMixin],
    components: {
    	navigationBar,
      Tit,
      Box
    },
    data(){
      return {
        navigationBarCompData:{
        	bg_color: "rgba(0,0,0,0)",
        	color: "#1A1B1F",
        	flag: 1,
        	name: '我的卡券',
          hasEntity:true
        },
        staticImgs:{
          bg:this.imgBaseURL + '/coupon/coupon_page_bg.png',
          emptyIcon:this.imgBaseURL + '/coupon/empty_icon.png',
        },
        currentTabIndex:0,
        couponData:[[],[],[]],
        // {
        //   endDate: '2023.10.31 23:59',
        //   tit:'立享全场折扣',
        //   rightText:'使用',
        //   typeText:'折扣券',
        //   type:0,
        //   num:5,
        // },
        globalData:getApp().globalData,
        couponCount:0,
        bodyHeight: 0,
        upOption: {
        	isBounce: true,
        	auto: false,
        	page: {
        		size: 1000 // 每页数据的数量,默认10
        	},
        	noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
        	empty: {
        		icon: this.imgBaseURL + '/coupon/empty_icon.png',//'/static/images/img_no_data_order.png',
        		tip: '暂无优惠券'
        	}
        },
        reload:false,
        isEmptyCoupon:true,
      }
    },
    async onLoad() {
      // console.log(this.rpxToPx,'------rpxToPx')
      console.log(this.globalData,'----globalData')
      console.log((this.globalData.topHeight*2),'-----gloccccc')
      console.log(this.rpxToPx(this.globalData.topHeight*2),'-------rpxToPx')
      console.log(this.rpxToPx(66),'--------console.log')
      const screenHeightPercent6 = this.globalData.windowHeight * 0.06
      this.bodyHeight = (this.globalData.windowHeight - (this.rpxToPx((this.globalData.topHeight*2))  + this.rpxToPx(66) + screenHeightPercent6) ) + 'px'
      console.log(this.bodyHeight,'====this.bodyHeight')
      await this.getUserDiscountCount()
      await this.getUserDiscountPage({
        size: 1000,
        num: 1,
      })
      
      // console.log(this.windowHeight,'---window')
    },
    methods: {
      clickBoxHandle(coupon){
        if(!coupon.isAct){
          return false
        }
        if(coupon.scene === 1){
          uni.reLaunch({
            url:'/pages/sclList/sclList'
          })
        }else{
          uni.reLaunch({
            url:'/pages/sclList/sclList'
          })
        }
        // console.log(coupon,'======clickBoxHandle')
      },
      async getUserDiscountPage(page){
        if (page.num == 1) this.couponData = [[],[],[]]
        
        const {data:dRes} = await getUserDiscountPage({
          pageNo: page.num,
          pageSize: page.size,
          useStatus:this.currentTabIndex === 0 ? 'Y' : 'N'
        })
        if(dRes.success){
          const tmpArr = [[],[],[]]
          const { 
            rows = []
          } = dRes.data
          rows.map(item=>{
            const tmpObj = {
              endDate:this.$dayjs(item.discountEndTime).format('YYYY-MM-DD HH:mm'),
              tit:item.discountName,
              rightText:'使用',
              typeText: item.discountType ===1 && item.discount == 10 ? '免单' : COUPON_TYPES[item.discountType],
              type:item.discountType,
              isAct: this.currentTabIndex === 0,
              num: item.discount,
              immediately: item.immediately,
              scene: item.usageScenario
            }
            if(item.usageScenario === 0){
              tmpArr[0].push(tmpObj)
            }else if(item.usageScenario === 1){
              tmpArr[1].push(tmpObj)
            }else if(item.usageScenario === 2){
              tmpArr[2].push(tmpObj)
            }
          })
          this.couponData = tmpArr
          if(tmpArr[0].length === 0 && tmpArr[1].length === 0 && tmpArr[2].length === 0){
            this.isEmptyCoupon = true
          }else{
            this.isEmptyCoupon = false
          }
          this.reload= true
          this.$nextTick(()=>{
            this.reload = false
          })
          console.log(dRes,'---------getUserDiscountPage')
          
          // this.mescroll.endBySize(rows.length, dRes.data.totalRows);
        }
      },
      async getUserDiscountCount(){
        const {data:dRes} = await getUserDiscountCount()
        if(dRes.success){
          this.couponCount = dRes.data
        }
      },
      tabClickHandle(index) {
        this.currentTabIndex = index
        this.getUserDiscountPage({
          size: 1000,
          num: 1,
        })
        // this.mescroll.resetUpScroll()
      }
    },
    onPageScroll(res) {
      const distance = res.scrollTop / 100
      if(distance>1){
        this.navigationBarCompData.bg_color = 'rgba(255,255,255,1)'
      }else{
        this.navigationBarCompData.bg_color = 'rgba(255,255,255,0)'
      }
    }
  }
</script>

<style lang="scss" scoped>
  .coupon-page{
    position: relative;
    height: 100vh;
    box-sizing: border-box;
    width: 100vw;
    background-size: contain;
    background-repeat: no-repeat;
    padding-top: 6vh;
    box-sizing: border-box;
    
    .content-wrapper{
      // height: 94vh;
      box-sizing: border-box;
      background: #FFFFFF;
      border-radius: 38rpx 38rpx 0rpx 0rpx;
      width: 100vw;
      padding-top: 18rpx;
      box-sizing: border-box;
      
      .tabs-wrapper{
        position: sticky;
        // top: 200rpx;
        background-color: #fff;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        $tab-height:66rpx;
        
        height: $tab-height;
        
        .tab-box{
          width: 50%;
          height: $tab-height;
          display: flex;
          align-items: center;
          justify-content: center;
          
          font-size: 28rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #999999;
          
          
          .act-line{
            display: none;
          }
          
          .tab-extra-info{
            // width: 84rpx;
            margin-left: 10rpx;
            height: 32rpx;
            padding:0 22rpx;
            background: #FF5FA7;
            border-radius: 17rpx;
            
            line-height: 32rpx;
            font-size: 24rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #FFFFFF;
          }
        }
        .tab-box-act{
          font-size: 28rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
          
          .tab-box-text{
            position: relative;
            height: $tab-height;
            display: flex;
            align-items: center;
          }
          .act-line{
            display: block;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            // width: 60rpx;
            height: 6rpx;
            background: #FF5B6F;
            border-radius: 4rpx;
            transform: scale(0.75, 1);
          }
        }
        
      }
      //.tabs-wrapper ==== end
      
      .coupon-list-wrapper{
        width: 100vw;
        padding: 40rpx 36rpx;
        box-sizing: border-box;
        // height: 74vh;
        box-sizing: border-box;
        overflow: scroll;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        
        .group{
          display: flex;
          flex-direction: column;
          width: 100%;
        }
        
        .coupon-list{
          margin-top: 12rpx;
          margin-bottom: 36rpx;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          row-gap: 12rpx;
        }
       
        .empty-block{
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: center;
          margin-top: 280rpx;
          
          .empty-icon{
            &,image{
              height: 220rpx;
              width: 332rpx;  
            }            
          }
          
          .text{
            margin-top: 50rpx;
            font-size: 32rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
          }
        }
      }
      //.coupon-list-wrapper ==== end
    }
    
  }
</style>